<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!--:model作用：可以使得el-form针对表单的全部信息进行收集，固定属性-->
        <el-form ref="addFormRef" :model="addForm" label-width="120px">
          <el-form-item label="学科：" prop="subjectID">
            <el-select v-model="addForm.subjectID">
              <el-option
                v-for="item in subjectIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录：" prop="catalogID">
            <el-select v-model="addForm.catalogID">
              <el-option
                v-for="item in catalogIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业：" prop="enterpriseID">
            <el-select v-model="addForm.enterpriseID">
              <el-option
                v-for="item in enterpriseIDList"
                :key="item.id"
                :label="item.shortName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市：" prop="province">
            <el-select v-model="addForm.province" @change="addForm.city=''">
              <el-option v-for="(item,k) in provinces()" :key="k" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="addForm.city">
              <el-option
                v-for="(item,k) in citys(addForm.province)"
                :key="k"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向：" prop="direction">
            <el-select v-model="addForm.direction">
              <el-option v-for="item in directionList" :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型：" prop="questionType">
            <el-radio-group v-model="addForm.questionType">
              <el-radio
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.value.toString()"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度：" prop="difficulty">
            <el-radio-group v-model="addForm.difficulty">
              <el-radio
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.value.toString()"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干：" prop="question">
            <el-input type="textarea" v-model="addForm.question"></el-input>
          </el-form-item>
          <el-form-item label="选项：" v-if="addForm.questionType!=='3'">
            <!-- 单选框组 -->
            <template v-if="addForm.questionType==='1'">
              <el-radio v-model="singleSelect" :label="0">
                A.
                <el-input type="text" v-model="addForm.options[0]['title']"></el-input>
              </el-radio>
              <br />
              <el-radio v-model="singleSelect" :label="1">
                B.
                <el-input type="text" v-model="addForm.options[1]['title']"></el-input>
              </el-radio>
              <br />
              <el-radio v-model="singleSelect" :label="2">
                C.
                <el-input type="text" v-model="addForm.options[2]['title']"></el-input>
              </el-radio>
              <br />
              <el-radio v-model="singleSelect" :label="3">
                D.
                <el-input type="text" v-model="addForm.options[3]['title']"></el-input>
              </el-radio>
            </template>

            <!-- 多选框组 -->
            <!-- 复选框特点：同一个时间允许选取多个，它们都是独立的
                    因此各个复选框的v-model可以针对自己的成员(isRight)进行绑定
                    复选框勾选 v-model接收true的信息
                    复选框不勾选 v-model接收false的信息
            -->
            <template v-if="addForm.questionType==='2'">
              <el-checkbox v-model="addForm.options[0].isRight">
                A.
                <el-input type="text" v-model="addForm.options[0]['title']"></el-input>
              </el-checkbox>
              <br />
              <el-checkbox v-model="addForm.options[1].isRight">
                B.
                <el-input type="text" v-model="addForm.options[1]['title']"></el-input>
              </el-checkbox>
              <br />
              <el-checkbox v-model="addForm.options[2].isRight">
                C.
                <el-input type="text" v-model="addForm.options[2]['title']"></el-input>
              </el-checkbox>
              <br />
              <el-checkbox v-model="addForm.options[3].isRight">
                D.
                <el-input type="text" v-model="addForm.options[3]['title']"></el-input>
              </el-checkbox>
            </template>
          </el-form-item>
          <el-form-item label="答案：" prop="answer">
            <el-input type="textarea" v-model="addForm.answer"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remarks">
            <el-input type="textarea" v-model="addForm.remarks"></el-input>
          </el-form-item>
          <el-form-item label="标签：" prop="tags">
            <el-input type="text" v-model="addForm.tags"></el-input>
          </el-form-item>
          <el-form-item>
            <!-- resetFields:是给全部表单做重置操作的，是element-ui的form组件提供的方法，使用时需加括号()调用 -->
            <!-- 使用的前提是：每个el-form-item项目必须设置prop属性，且prop的值与v-model的后缀名称一致 -->
            <el-button type="info" @click="$refs.addFormRef.resetFields()">重置</el-button>
            <el-button type="primary" @click="tianjia()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入“学科”的api
import { simple as subjectsSimple } from '@/api/hmmm/subjects'
// 导入“二级目录”的api
import { simple as directorysSimple } from '@/api/hmmm/directorys'
// 导入“城市和区县”的api
import { provinces, citys } from '@/api/hmmm/citys'
// 导入“方向(是：常量)”的api
import { direction as directionList } from '@/api/hmmm/constants'
// 导入“企业”的api
import { list as companysList } from '@/api/hmmm/companys'
// 导入“题型(是：常量)”的api
import { questionType as questionTypeList } from '@/api/hmmm/constants'
// 导入“难度(是：常量)”的api
import { difficulty as difficultyList } from '@/api/hmmm/constants'
// 导入“试题”的api
import { add } from '@/api/hmmm/questions'

export default {
  name: 'QuestionsNew',
  data() {
    return {
      // 添加试题 表单数据对象
      addForm: {
        // 以下表单字段名称来自yapi数据接口
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        enterpriseID: '', // 企业
        city: '', // 区县
        province: '', // 城市
        direction: '', // 方向
        questionType: '1', // 默认“单选” 题型 项目被选中(要求是字符串)
        difficulty: '1', // 默认“难度” 第一个项目被选中(要求是字符串)
        question: '', // 题干
        answer: '', // 答案
        remarks: '', // 备注
        tags: '', // 标签
        videoURL: 'http://www.xxx.com', // 解析视频
        // 选项表单数据对象部分
        options: [
          // {code: '编号ABCD', title: '当前项目文字答案描述',
          //   img: '当前项目图片答案', isRight: boolean表明当前项目是否是答案},
          { code: 'A', title: '', img: '', isRight: false },
          { code: 'B', title: '', img: '', isRight: false },
          { code: 'C', title: '', img: '', isRight: false },
          { code: 'D', title: '', img: '', isRight: false }
        ]
      },
      subjectIDList: [], // 学科
      catalogIDList: [], // 二级目录
      directionList, // 方向(简易成员赋值)
      enterpriseIDList: [], // 企业
      questionTypeList, // 题型 (简易成员赋值)
      difficultyList, // 难度 (简易成员赋值)
      singleSelect: '' // 感知被被选中的项目的值，是中间成员，需要通过watch转变为isRight
    }
  },
  watch: {
    singleSelect(newValue, oldValue) {
      // 设置当前单选按钮选中情况，即isRight的值发生变化
      // 1. 先让全部项目都处于false不选中状态
      for (var i = 0; i < 4; i++) {
        this.addForm.options[i].isRight = false
      }
      // 2. 当前选中项目的isRight为true
      this.addForm.options[newValue].isRight = true
    }
  },
  created() {
    // "学科"数据渲染
    this.getSubjectIDList()
    // "二级目录"数据渲染
    this.getCatalogIDList()
    // "企业"数据渲染
    this.getEnterpriseIDList()
  },
  methods: {
    provinces, // 获得城市的方法(简易成员赋值)
    citys, // 获得地区的方法(简易成员赋值)
    // 1."学科" 列表信息
    async getSubjectIDList() {
      const result = await subjectsSimple()
      // console.log(result)
      this.subjectIDList = result.data
    },
    // 2."目录" 列表信息
    async getCatalogIDList() {
      const result = await directorysSimple()
      // console.log(result)
      this.catalogIDList = result.data
    },
    // 3."企业" 列表信息
    async getEnterpriseIDList() {
      const result = await companysList()
      // console.log(result)
      this.enterpriseIDList = result.data.items
    },
    // 4.添加试题
    async tianjia() {
      // 调用api
      // await除了获得具体返回结果，还有一个作用
      // 等待添加完成再向后执行，可以保证添加的数据会在列表中展示
      await add(this.addForm)
      // console.log(result)  // 有返回新试题的id信息
      // 提示成功信息
      this.$message.success('添加试题成功！')
      // 页面跳转到列表去
      this.$router.push('/questions/list')
    }
  }
}
</script>

<style scoped>
.el-input {
  margin-top: 10px;
}
</style>
